<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>知识库命中测试</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
		<!-- jQuery-->
		<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

		<!-- layui-->
		<link rel="stylesheet" href="/static/plugins/layui/2.8.4/css/layui.css" media="all">
		<script src="/static/plugins/layui/2.8.4/layui.js" charset="utf-8"></script>

		<!-- 页面样式-->
		<link rel="stylesheet" href="/static/css/eKnow/knowledgeHitBase.css" media="all">

	</head>
	<style>

	</style>
	<body style="background-color: #F7F7F9;">
		
		<!--标题-->
		<div class="title-view">
			<div class="title-main"><span>知识库命中测试</span></div>
			<div class="title-tip">
				<span>什么是知识库命中测试？</span><br>
				<span>知识库是AI回答问题时，参考的一份资料。那AI回答时具体会参考哪些资料呢？</span><br>
				<span>其实当你输入问题或关键词时，系统知识库会通过关键词匹配相应的资料，然后提供给AI。而命中测试功能，就是用于这一步骤的调试，帮助你确认知识库对关键词的匹配情况，以方便调整知识库。</span>
			</div>
		</div>

		<!--内容-->
		<div class="content-view">
			<!--内容顶部按钮-->
			<div class="btn-view">


				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary choose-btn" lay-on="test-offset-knowledgeBase" onclick="chooseKnowledgeBase();">
						<i class="layui-icon layui-icon-link layui-font-12"></i> 关联知识库
					</button>
				</div>



				<div class="btn-view-search">
					<div>
						<span style="text-align: right;">返回数量<i class="layui-icon layui-icon-question" id="backNum" style="color: #ffa33a;padding-left: 5px; cursor: pointer;" ></i>：</span>
						<div id="ID-slider-demo-step-1" style="width: 200px;float: right;margin-left: 10px;padding-top: 8px;"></div>
					</div>
					<div style="margin-top: 15px;">
						<span style="text-align: right;">置信度<i class="layui-icon layui-icon-question" id="setNum" style="color: #ffa33a;padding-left: 5px; cursor: pointer;" ></i>：</span>
						<div id="ID-slider-demo-step-2" style="width: 200px;float: right;margin-left: 10px;padding-top: 8px;"></div>
					</div>
				</div>

			</div>

			<div style="margin-left: 20px;width: 70%;" id="chooseBtn">
			</div>

			<div class="layui-input-group btn-view-search-set">
				<input type="text" placeholder="输入您要查询的问题或关键词" class="layui-input" id="nameInput">
				<div class="layui-input-split layui-input-suffix" style="cursor: pointer;" onclick="searchName();">
					<i class="layui-icon layui-icon-search"></i>
				</div>
			</div>


			<hr>

			<!--内容列表-->
			<div class="layui-bg-white" style="padding: 16px;max-height:calc(100vh - 370px);overflow: auto;">
			  <div class="layui-row layui-col-space15" id="knowledgeList">

				  <!--
				<div class="layui-col-md3">
				    <div class="layui-card card-view" >
						<div class="layui-card-header">客服AI知识库
							<div class="more-set">置信度：0.0.4</div>
						</div>
						<div class="layui-card-body card-body-set">运营问答相关，提供实时陪伴式运营</div>
				    </div>
				</div>

-->

			  </div>
			</div>


		</div>

		<input type="hidden" name="size" id="size" value="5"><!--返回数量-->
		<input type="hidden" name="score" id="score" value="0"><!--置信度-->

		<script type="text/javascript">
			var tipIndex = null;
			$("#backNum").mouseover(function() {
				tipIndex = layer.tips("知识库获取的数量。（返回的数量 “小于等于” 你设置的）", this, {tips: [1, "#C1C1C1"],time:0});
			});
			$("#setNum").mouseover(function() {
				tipIndex = layer.tips("知识库与你输入的问题（关键词）的关联程度。（返回信息的置信度 “大于等于” 你设置的）", this, {tips: [3, "#C1C1C1"],time:0});
			});
			$("#backNum").mouseout(function() {layer.close(tipIndex);});
			$("#setNum").mouseout(function() {layer.close(tipIndex);});

			var chooseList = [];
			var chooseListNo = [];

			//查询
			function searchName() {
				if(chooseList==null || chooseList.length<=0){
					layer.msg('请先关联知识库', {icon: 0});
					return ;
				}
				var question = $('#nameInput').val();
				if(question==null || question==''){
					layer.msg('请填写您要查询的问题或关键词', {icon: 0});
					return ;
				}
				var layindex= layer.msg('查询中', {icon: 16,shade: 0.01});
				var baseIds = '';
				for(var i=0;i<chooseList.length;i++){
					if(baseIds==''){
						baseIds = chooseList[i].id;
					}else {
						baseIds += ','+chooseList[i].id;
					}
				}

				var size = $('#size').val();
				var score = $('#score').val();
				$.ajax({
					url : '/api/inter/knowledgeHitTest/getKnowledgeByInput',
					data : {
						'baseIds':baseIds,
						'question':question,
						'size':size,
						'score':score
					},
					type : 'POST',
					async : false,
					success : function(result) {
						layer.close(layindex);
						var htmlStr = '';
						if(result.code=='SUCCESS'){
							var getSceneKnowledgeList = result.getSceneKnowledgeList;
							var shardIdList = result.shardIdList;
							console.log('getSceneKnowledgeList',getSceneKnowledgeList);
							console.log('shardIdList',shardIdList);
							if(getSceneKnowledgeList!=null && shardIdList!=null){
								for(var i=0;i<getSceneKnowledgeList.length;i++){
									var backScore = 0;//置信度
									for(var j=0;j<shardIdList.length;j++){
										if(shardIdList[j].id==getSceneKnowledgeList[i].eSId){
											backScore = shardIdList[j].score;
										}
									}
									htmlStr += '<div class="layui-col-md3" style="cursor: pointer;" onclick="toDetail(\''+getSceneKnowledgeList[i].id+'\');">'+
											'<div class="layui-card card-view" >' +
											'<div class="layui-card-header">' +getSceneKnowledgeList[i].knowledgeBaseName+
											'<div class="more-set">置信度：'+backScore+'</div>' +
											'</div>' +
											'<div class="layui-card-body card-body-set"><span class="list-span">'+getSceneKnowledgeList[i].information+'</span></div>' +
											'</div></div>';
								}

							}else {
								htmlStr = '<div class="layui-col-md12" style="width: 100%; text-align:center;">暂无知识库资料信息</div>';
							}

						}else{
							layer.msg('不好意思，系统出现问题了，请稍后重试！', {icon: 2});
						}
						$('#knowledgeList').html(htmlStr);
					}
				});
			}

			//跳转详情页
			function toDetail(id) {
				layer.open({
					title: '详情',
					type: 2,
					area: ['1000px', '600px'],
					content: '/web/eKnowAi/webEKnowAiController/knowledgeBaseListDetail?id='+id,
					fixed: false, // 不固定
					maxmin: true,
					btnAlign: 'c',
				});
			}
			//关联知识库弹框开启
			function chooseKnowledgeBase(){
				$.ajax({
					url : '/api/inter/knowledgeHitTest/getKnowledgeBase',
					data : {},
					type : 'POST',
					async : false,
					success : function(result) {
						if(result.code=='SUCCESS'){
							chooseListNo = chooseList;
							var eKnowKnowledgeBase = result.eKnowKnowledgeBase;
							var htmlStr = '<div class="layui-bg-gray" style="padding: 16px;max-height:calc(100vh - 90px);overflow: auto;"><div class="layui-row layui-col-space15">';
							if(eKnowKnowledgeBase!=null && eKnowKnowledgeBase.length>0){
								for(var i=0;i<eKnowKnowledgeBase.length;i++){
									var isChooseed = false;
									var id = eKnowKnowledgeBase[i].id;
									if(chooseList!=null && chooseList.length>0){
										for(var j=0;j<chooseList.length;j++){
											if(chooseList[j].id==id)isChooseed=true;
										}
									}
									htmlStr+='<div class="layui-col-md6" style="cursor: pointer;" onclick="chooseBase(\''+id+'\',\''+eKnowKnowledgeBase[i].knowledgeBaseName+'\');">'+
									'<div id="chooseView'+id+'" class="layui-card  choose-view-none'+(isChooseed?'choose-view':'')+'">'+
									'<div class="layui-card-header" >' +eKnowKnowledgeBase[i].knowledgeBaseName+
									'<div style="float: right;" id="checkbox'+id+'" '+(isChooseed?'':'hidden')+'><i class="layui-icon layui-icon-ok" style="color: #4BB2FF;font-weight: bold;"></i></div>'+
									'</div>'+
									'<div class="layui-card-body" style="height: 100px;"><span class="list-span">' +eKnowKnowledgeBase[i].knowledgeBaseDescribe+'</span></div></div></div>';

								}


							}
							htmlStr+='</div>'+
									'<div class="bottom-view-open">'+
									'<div class="layui-btn-container add-btn-view-open">'+
									'<button type="button" class="layui-btn layui-bg-blue add-btn-open" onclick="yesChoose();">确定</button> '+
									'</div>'+
									'</div>';
							layer.open({
								title:'选择知识库',
								type: 1,
								offset: 'r',
								anim: 'slideLeft', // 从右往左
								area: ['500px', '100%'],
								shade: 0.5,
								shadeClose: true,
								closeBtn:0,
								id: 'ID-demo-layer-direction-r',
								content:htmlStr
							})
						}else{
							layer.msg('不好意思，系统出现问题了，请稍后重试！', {icon: 2});
						}
					}
				});

			}
			//弹框选择知识库样式
			function chooseBase(id,name){
				var isChooseed = false;
				var newChooseList = [];
				if(chooseListNo!=null && chooseListNo.length>0){
					for(var j=0;j<chooseListNo.length;j++){
						if(chooseListNo[j].id==id){
							isChooseed=true;
						}else {
							newChooseList.push({id:chooseListNo[j].id,name:chooseListNo[j].name});
						}
					}
				}
				chooseListNo = newChooseList;
				if(isChooseed){
					$('#chooseView'+id).removeClass('choose-view');
					$('#checkbox'+id).hide();
				}else {
					chooseListNo.push({id:id,name:name});
					$('#chooseView'+id).addClass('choose-view');
					$('#checkbox'+id).show();
				}
			}

			//确认
			function yesChoose() {
				layer.closeAll();
				chooseList = chooseListNo;
				resetBtn();
			}

			//重新设置知识库标签
			function resetBtn(){
				var htmlStr = '';
				if(chooseList!=null && chooseList.length>0){
					for(var j=0;j<chooseList.length;j++){
						htmlStr += '<button type="button" class="layui-btn layui-btn-xs" onclick="delBtn(\''+chooseList[j].id+'\')">'+chooseList[j].name+' <i class="layui-icon layui-icon-close layui-font-12"></i></button>'
					}
				}
				$('#chooseBtn').html(htmlStr);
			}

			//删除选择的知识库
			function delBtn(id){
				var newChooseList = [];
				if(chooseList!=null && chooseList.length>0){
					for(var j=0;j<chooseList.length;j++){
						if(chooseList[j].id!=id){
							newChooseList.push({id:chooseList[j].id,name:chooseList[j].name});
						}
					}
				}
				chooseList = newChooseList;
				resetBtn();
			}

			layui.use(function(){
				var dropdown = layui.dropdown;
				var layer = layui.layer;
				var util = layui.util;
				var $ = layui.$;
				var slider = layui.slider;
				slider.render({
					elem: '#ID-slider-demo-step-1',
					theme: '#1E9FFF', // 主题色
					step: 1, // 步长
					min: 1, // 最小值
					max: 15, // 最大值
					value: 5, //初始值
					done: function(value){
						console.log(value) // 滑块当前值
						$('#size').val(value);
						// do something
					}
				});
				slider.render({
					elem: '#ID-slider-demo-step-2',
					step: 1, // 步长
					min: 0, // 最小值
					max: 100, // 最大值
					value: 0, //初始值
					setTips: function(value){ // 自定义提示文本
						return value + '%';
					},
					done: function(value){
						console.log(value) // 滑块当前值
						// do something
						$('#score').val(value);
					}
				});

			});

		</script>
		
	</body>
</html>


